<template>
  <div class="app-container">

   <!-- <el-card shadow="never">
      <div slot="header" style="text-align: center;">商品二级分类列表</div> -->
      <div style="margin-bottom: 10px">
        <el-button type="primary" size="small" @click="hide">返回商品分类</el-button>
        <el-button type="success" size="small" @click="addmodel">添加</el-button>
      </div>
      <div class="tableClass">
        <!-- v-loading="loading" -->
        <el-table :data="formdata" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border style="width: 100%;">
          <el-table-column align="center" prop="id" label="序号" />
          <el-table-column align="center" prop="img_id" label="商品图片">
            <template slot-scope="scope">
              <!-- <div @click="showTaskModel(scope.row)" style="cursor:pointer;color:#409EFF">{{scope.row.task_name}}</div> -->
              <el-button type="text" size="medium">
                <img style="width: 50%;" :src="scope.row.img_url" />
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="类型名称" />
          <el-table-column align="center" prop="desc" label="描述" />
          <!-- <el-table-column align="center" prop="link_url" label="链接" /> -->
           <el-table-column align="center" prop="sort" label="排序" />
          <el-table-column align="center" prop="created_at" label="创建时间" />
          <el-table-column align="center" prop="status_name" label="状态" />
          <el-table-column align="center" label="操作" width="230px">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="updateMsg(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="mini" @click="delMsg(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!-- 分页 -->
        <div style="text-align: center;">
          <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="pageSize"
            :total="totalusers" />
        </div>
      </div>
    <!-- </el-card> -->

    <!-- 模态款-->
    <div>
      <!-- 添加模态款 -->
      <el-dialog :title="title" :visible.sync="modelMsg">
        <div class="msgDiv">
          <div>
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="序号" v-show="vshow">
                <el-input v-model="form.id" placeholder="序号" disabled></el-input>
              </el-form-item>
              <el-form-item label="分类名称" :required="true">
                <el-input v-model="form.name" placeholder="请输入二级商品分类名称"></el-input>
              </el-form-item>
              <el-form-item label="分类描述" >
                <el-input v-model="form.desc" placeholder="请输入二级商品分类描述"></el-input>
              </el-form-item>
             <!-- <el-form-item label="链接">
                <el-input v-model="form.link_url" placeholder="请输入二级商品分类链接"></el-input>
              </el-form-item> -->
              <el-form-item label="排序">
                <el-input v-model="form.sort" placeholder="请输入排序数字，数字越小则排序越靠前"></el-input>
              </el-form-item>
             <!-- <el-form-item label="营业时间" style="text-align: left;">
                <el-time-picker is-range v-model="newtime" value-format="HH:mm:ss" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                </el-time-picker>
              </el-form-item> -->
              <el-form-item label="状态" :required="true" style="text-align: left;line-height: 40px;">
                <el-select v-model="form.status">
                  <el-option v-for="opt in options" :key="opt.id" :value="opt.id" :label="opt.label" />
                </el-select>
              </el-form-item>

              <div style="text-align: left;">
                <el-form-item label="分类图片" style="color: black;">
                  <el-tooltip placement="top">
                    <div slot="content">请上传二级商品分类的图片</div>
                    <i class="el-icon-info" style="font-size: 18px;"></i>
                  </el-tooltip>
                  <el-upload class="avatar-uploader" :action="$api.UPLOAD_IMG" name='photo'
                    :show-file-list="false" :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">

                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>

                </el-form-item>
              </div>
              <el-button type="success" @click="addMsg(form)">{{addORupdate}}</el-button>

            </el-form>

          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      merchantIdProp: '',
      pid: ''
    },
    watch: {
      merchantIdProp(val) {

      },
      pid(val) {
        if(val){
          this.startpage = 1
          this.form.pid = val
          this.getGoodsClassifyList()
        }
      }
    },
    data() {
      return {
        form: {
          id: "",
          name: "",
          desc: "",
          province: "",
          merchant_id: "",
          pid:"",
          sort:"",
          img_id: "",
          link_url: "",
          status: "1",
        },
        merchant_id:"",
        deliveryForm: {
          id: "",
          delivery_method: []
        },
        deliveryAll: {
          expressMoney: "",
          scope: "",
          step: "",
          fee: "",
        },
        options: [{
            id: '0',
            label: "关闭"
          }, {
            id: '1',
            label: "开启"
          }
        ],
        checked1: false,
        checked2: false,
        checked3: false,
        newtime: "",
        addressList: [],
        storeDetailAll: [],
        addressDetail: "",
        deliveryWay: "",
        value: "",
        title: "",
        imageUrl: "",
        DeliveryModel: false,
        businessModel: false,
        vshow: false,
        addORupdate: "",
        modelMsg: false, //模态款
        loading: false, //加载中
        formdata: [],
        totalusers: 0, //总页数
        pageSize: 10, //每页几行
        startpage: 1, //起始页
      }
    },
    created() {
      /* let comeid = this.$route.query.row;
       window.localStorage.setItem("pid",comeid)*/
    },
    mounted() {
      /*this.form.merchant_id =  window.localStorage.getItem("merchant_id")
       this.form.pid =  window.localStorage.getItem("pid")*/
      this.form.merchant_id = this.merchantIdProp
      this.form.pid = this.pid
      this.getGoodsClassifyList()
    },
    methods: {

      hide() {
        this.$emit('hideFirstClassify')
      },

      //删除店铺信息
      async delMsg(id) {
        let delid = {
          id: id
        }
        await this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const loadingOne = this.$loading({
            lock: true,
            text: '保存中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.$api.delGoodsClassify(delid).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            if (res.data.level == "success") {
              loadingOne.close()
              this.getGoodsClassifyList()
            } else {
              this.$message.error(res.data.message)
              loadingOne.close()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addmodel() {
        this.modelMsg = true
        this.title = '添加商品二级类型'
        this.addORupdate = "添加",
          this.vshow = false
          this.form.id = "",
          this.form.name = "",
          this.form.desc = "",
          this.form.sort = "",
          this.form.img_id = "",
          this.form.link_url = "",
          this.form.status = "1"
          this.imageUrl = ""
      },
      async addMsg(form) {
        //判断带星号的是否为空
        if ((form.name && form.status) == "") {
          this.$message({
            message: "带星号为必填项，请完善信息！",
            type: "warning"
          })
          return false;
        }
        /* 显示加载中。。。 */
        const loadingOne = this.$loading({
          lock: true,
          text: '保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (form.id > 0) {
          /* 修改 */
          await this.$api.setGoodsClassify(form).then(res => {
            this.$message({
              type: res.data.level,
              message: res.data.message
            });
            if (res.data.level == "success") {
              this.getGoodsClassifyList()
              loadingOne.close()
              this.modelMsg = false
            } else {
              this.modelMsg = true
              loadingOne.close()
            }

          })
        } else {
          /* 添加 */
          await this.$api.setGoodsClassify(form).then(res => {
            this.$message({
              type: res.data.level,
              message: res.data.message
            });
            if (res.data.level == "success") {
              this.getGoodsClassifyList()
              loadingOne.close()
              this.modelMsg = false
            } else {
              this.modelMsg = true
              loadingOne.close()
            }

          })
        }
        this.modelMsg = false

      },
      //修改弹出框
      updateMsg(id) {
        this.modelMsg = true
        this.title = '修改商品二级类型'
        this.addORupdate = "修改",
        this.vshow = true
        let dataid = {
          "id":id
        }
        this.$api.getGoodsClassifyDetail(dataid).then(res=>{
           let row = res.data.data
           this.form.id = row.id
           this.form.name = row.name
           this.form.desc = row.desc
           this.form.sort = row.sort
           this.form.merchant_id = row.merchant_id
           this.form.pid = row.pid
           this.form.img_id = row.img_id,
           this.imageUrl = row.img_url
           this.form.link_url = row.link_url
        })
      },
      //获取分页列表
      getGoodsClassifyList() {
        this.loading = true
        let params = {
          "page": this.startpage,
          "limit": this.pageSize,
          "merchant_id": this.form.merchant_id,
          "pid":this.form.pid
        }
        //调用后台提供的接口方法
        this.$api.getGoodsClassifyList(params).then(res => {
          if (res.data.level == "success") {
            this.formdata = res.data.data
            this.totalusers = res.data.page_info.total
            this.loading = false
          }
        })
      },
      //分页 pageChange当前页发生改变触发函数
      async pageChange(page) {
        this.startpage = page
        //调用获取列表的方法
        this.loading = true
        this.getGoodsClassifyList()
      },
      //图片上传
      handleAvatarSuccess(res, file) {
        //console.log(res.data.id)
        this.form.img_id = res.data.id
        //console.log(file)
        this.imageUrl = res.data.img_url;
      },
      //验证图片格式
      beforeAvatarUpload(file) {
        /*const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;*/
      },
    }
  }
</script>
<style scoped="scoped">
  /deep/.el-card__header {
    background-color: #ff4040;
    color: whitesmoke;
  }

  /deep/.el-dialog {
    width: 40%;
    margin-top: 5vh !important;
    margin-bottom: 10vh;
  }

  .msgDiv {
    width: 80%;
    margin: auto;
    text-align: center;
  }

  /* model */
  .businessDialog /deep/.el-dialog__title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
  }

  .businessDialog /deep/.el-dialog__body {
    padding: 30px 50px;
    background-color: #dddddd57;
  }

  .businessDialog /deep/.el-dialog {
    margin-top: 10vh !important;
    width: 33%;
  }

  .businessCss .msgDiv {
    width: 80%;
    margin: auto;
    text-align: center;
  }

  .businessCss /deep/.el-form-item__label {
    font-size: 20px !important;
    text-align: right !important;
  }

  .businessCss /deep/.el-form-item__content {
    font-size: 20px !important;
  }

  /* 任务详细CSS */
  .taskWarp /deep/.el-form-item {
    margin-left: 15px;
  }

  .taskWarpTitle /deep/.el-dialog__title {
    font-size: 22px;
  }

  .taskWarp /deep/.el-form-item__label {
    font-size: 18px;
  }

  .taskCss {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 16px;
    background-color: #dddddd57;
    text-align: left;
    padding: 10px 30px 10px 30px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .taskCss span.title {
    font-weight: bold;
  }

  .taskCss span.name {
    color: #e21515eb;
  }

  .taskName {
    font-size: 22px;
    color: #e21515eb;
    background-color: #dddddd57;
    display: inline-block;
    padding: 5px 12px 5px 12px;
    font-weight: bold;
    font-family: serif;
    border-radius: 5px;
  }

  .indentLeft {
    margin-left: 26px;
  }

  .requiredCSS {
    margin-left: 30px;
    margin-right: 30px;
    background-color: #dddddd57;
    border-radius: 10px;
    padding: 10px 30px 10px 30px;
  }

  /deep/.edui-editor-imagescale {
    top: 130px !important;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #807979;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  /* model */
  .businessDialog /deep/.el-dialog__title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
  }

  .businessDialog /deep/.el-dialog__body {
    padding: 30px 50px;
    background-color: #dddddd57;
  }

  .businessDialog /deep/.el-dialog {
    margin-top: 10vh !important;
    width: 33%;
  }

  .businessCss .msgDiv {
    width: 80%;
    margin: auto;
    text-align: center;
  }

  /deep/.el-form-item__label {
    padding: 0px 12px 0px 20px;
  }

  .businessCss /deep/.el-form-item__label {
    font-size: 20px !important;
    text-align: right !important;
  }

  .businessCss /deep/.el-form-item__content {
    font-size: 20px !important;
  }

  /* 选择框*/
  .checkboxLeft {
    text-align: left;
    margin-bottom: 15px;
  }

  /deep/.el-checkbox__inner {
    /* width: 18px;
    height: 18px; */
  }

  /deep/.el-checkbox__label {
    font-size: 16px;
  }

  .checkSpan {
    width: 80px;
    line-height: 40px;
    font-size: 16px;
    text-align: right;
    margin-right: 10px;
  }
</style>
